<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>登陆</title>
        <style>
            *{
                box-sizing: border-box;
            }
            html,body{
                width: 100%;
                height: 100%;
            }
            body{
                margin: 0;
                overflow: hidden;
                background-image: url(img/background.jpg);
                background-size: 100% 105%;
            }
            #container{
                padding: 100px 50px;
            }
            #title{
                height: 50px;
                background-image: url("./images/Title.png");
                background-size: 100% 100%;
                line-height: 45px;
                text-align: center;
                color: white;
                font-size: 25px;
                font-weight: bold;
                margin-bottom: 50px;
                color: green;
            }
            .input-box{
                margin: 20px 0;
                text-align: center;
                color: white;
            }
            .input-box input{
                height: 35px; 
                width: 200px;
                background-image: url(img/timg2.jpg);
                background-size: 100% 100%;
                padding: 0 10px;
                font-size: 18px;
            }
            #go-register{
                text-align: right;
            }
            #go-register a{
                font-size: 12px;
                text-decoration: none;
                color: #999;
            }
            #login{
                text-align: center;
            }
            #login button{
                width: 200px;
                height: 60px;
                background-image: url(img/timg1.jpg);
                background-size: 100% 100%;
                border: none;
                background-color: transparent;
                color: white;
                font-size: 20px;
                margin-top: 100px;
                color: black;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <!-- 标题 -->
            <div id="title">登陆</div>
            <!-- 输入 -->
            <div>
                <div class="input-box">
                    <label for="username">账号：</label>
                    <input type="text" id="username">
                </div>
                <div class="input-box">
                    <label for="password">密码：</label>
                    <input type="password" id="password">
                </div>
            </div>
            <!-- 注册 -->
            <div id="go-register">
                <a href="注册页面.html">还没有账号？去注册</a>
            </div>
            <!-- 登陆 -->
            <div id="login">
                <button>登陆</button>
            </div>
        </div>
    </body>
    <script>
         // 点击登陆按钮
         document.querySelector("#login button").onclick = function(){
            // 用户名
            var username = document.getElementById("username").value;
            // 密码
            var password = document.getElementById("password").value;

            // 从本地拿到注册账号
            var accounts = JSON.parse(localStorage.getItem("accounts"));
            // 比较输入的用户名在数组是否存在
            var exist = accounts.some(function(ele){
                return ele.username == username && ele.password == password;
            });
            if (exist) {
                location.href = "游戏选项.html";
            }else{
                alert("账号或密码错误！");
            }
         }
    </script>
</html>